import React from 'react'
import { actions } from 'mirrorx'
import { Divider } from 'antd'

/*
后台返回的status对应的状态如下：
 1：Draft（草稿），
 2：Ready（暂存），
 3：Online（上线），
 4：Offline（下线），
 5：Expired（过期）
*/

// 编辑
function EditBtn (props) {
  let { channelCompanyId, menuAuth, id } = props
  return <div
    className='edit-btn'
    onClick={() => {
      menuAuth && actions.routing.push({
        pathname: '/page-product',
        search: `?channelGoodsId=${id}&channelCompanyId=${channelCompanyId}`
      })
    }}>Edit</div>
}

// 查看详情按钮
function ViewBtn (props) {
  let { id, toView, status } = props
  return <div
    onClick={() => toView(id, status)}
    className='edit-btn'>View</div>
}

// 删除按钮
function DeleteBtn (props) {
  return <div
    onClick={() => { props.menuAuth && props.showTips(props.item, 'delete') }}
    className={!props.menuAuth ? 'disabled-wrap' : 'delete-wrap'}> Delete</div>
}

// 下线按钮
let DisableBtn = (props) => <div
  onClick={() => { props.menuAuth && props.showTips(props.item, 'disable') }}
  className={!props.menuAuth ? 'disabled-wrap' : 'delete-wrap'}> Disable</div>

// 重新发布按钮
function RepublishBtn (props) {
  let { channelCompanyId, id } = props
  return <div
    onClick={() => {
      props.menuAuth && actions.routing.push({
        pathname: '/page-product',
        search: `?channelGoodsId=${id}&channelCompanyId=${channelCompanyId}&operation=republish`
      })
    }}>Republish</div>
}

// promotion item 底部的按钮组。
function BottomBtns (props) {
  let { item, channelCompanyId, toView, showTips, menuAuth } = props
  let { status, id } = item
  console.log('BottomBtns menuAuth', menuAuth)
  // 包装后的编辑按钮
  let Edit = () => <EditBtn menuAuth={menuAuth} id={id} channelCompanyId={channelCompanyId} />
  let View = () => <ViewBtn
    status={status}
    toView={toView}
    id={id} />
  let Delete = () => <DeleteBtn menuAuth={menuAuth} showTips={showTips} item={item} />
  let Disable = () => <DisableBtn menuAuth={menuAuth} showTips={showTips} item={item} />
  let Republish = () => <RepublishBtn menuAuth={menuAuth} id={id} channelCompanyId={channelCompanyId} />

  // 底部左边的按钮
  let BtnLeft = () => status === 1 ? <Edit /> : <View />

  // 右边的按钮
  let BtnRight = () => {
    if (status === 1 || status === 5) {
      return <Delete />
    } else if (status === 2) {
      return <Edit />
    } else if (status === 3) {
      return <Disable />
    } else if (status === 4) {
      return <Republish />
    } else {
      return ''
    }
  }
  return (<div className='btns'>
    {/* 左边按钮只有草稿状态可以编辑 */}
    <div className='left-btn'>
      <BtnLeft />
    </div>
    <Divider type='vertical' />
    {/* 右边按钮 Ready是可以编辑的 */}
    <div className='right-btn'>
      <BtnRight />
    </div>

  </div>)
}
export default BottomBtns
